<!-- 添加收货地址 -->
<template>
    <div class="address-container">
        <div class="input-wrapper">
            <h2><span>&nbsp;</span>{{switchFlag ? '修改收货地址' : '添加收货地址'}}</h2>
            <p class="warm-notice">暂不支持港澳台及海外地区</p>
            <div class="address-input-group">
                <h3>收货人手机号</h3>
                <p><input type="text" placeholder="请填写收货人手机号码" v-model="newPhone" /></p>
                <h3>收货人姓名</h3>
                <p><input type="text" v-model="newConsignee" placeholder="长度不超过20个字符" maxlength="20" /></p>
                <h3>收货地址</h3>
                <p><textarea type="text" v-model="newAddress" placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元号等详细信息"></textarea></p>
                <!--<h3>邮编</h3>
                <p><input style="border:1px solid #e3e3e3;" v-model="newPostalCode" type="text" placeholder="请输入邮政编码" /></p>-->
                <h3 @click="toggleDefaultAddress" class="default-address"><img v-if="isDefault" src="~assets/images/choosed.png" /><img v-else src="~assets/images/unchoose.png" />设置为默认收货地址</h3>
            </div>
        </div>
        <div class="next-step" :class="{'fixed-position': positionFlag, 'static-position': !positionFlag}" @click="addNewAddress">
          <span>{{switchFlag ? '确认修改' : '确认添加'}}</span>
        </div>
    </div>
</template>

<script>
  import {userInfo, addUserAddress, clickNumber, editUserAddress, setDefaultAddress} from 'api/register'
  export default {
    props: [],
    components: {

    },
    data () {
      return {
        uid: window['uid'],
        shopToken: '',
        newPhone: '',
        newConsignee: '',
        newAddress: '',
        newPostalCode: '',
        newArea: 86,
        addrId: 0,
        gid: 0,
        switchFlag: false,
        isDefault: false,
        cvnt: '',
        name: '',
        num: '',
        unit: '张',
        area: '',
        phone: '',
        positionFlag: true
      }
    },
    beforeRouteEnter(to, from, next) {
      next((vm) => {
        let query = to.query;
        console.log(query);
        Object.assign(vm, query);
        if (query.id && query.id != 0) {
          vm.switchFlag = true;
          vm.newPhone = query.phoneInput;
          vm.newConsignee = query.username;
          // vm.newPostalCode = query.code;
          vm.newAddress = query.address;
          vm.addrId = query.id;
        }
        if (query.gid && query.gid != 0) {
          vm.gid = query.gid;
        }
        vm.uid = query.uid;
        vm.cvnt = query.cvnt;
        vm.name = query.name;
        vm.num = query.num;
        vm.unit = query.unit;
        vm.area = query.area;
        vm.phone = query.phone;
        vm.shopToken = query.shopToken;
      })
    },
    beforeRouteLeave(to, from, next) {
      this.clearStorage();
      this.switchFlag = false;
      next();
    },
    mounted(){
      window.addEventListener('scroll', this.handleScroll);
    },
    computed: {

    },
    methods: {
      handleScroll() {
        var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
        var winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        var window_height = winHeight + document.body.offsetTop;
        if (scrollHeight <= window_height) {
          // alert('111');
          this.positionFlag = false;
        } else {
          this.positionFlag = true;
        }
      },
      showToast(msg, type) {
        const toast = this.$createToast({
          time: 2000,
          txt: msg,
          type: type
        });
        toast.show();
      },
      addNewAddress() {
        if (this.newPhone == '') {
          // this.$notice.showWarningNotice('手机号码不能为空！');
          this.showToast('手机号码不能为空！', 'warn');
          return;
        }
        let reg = /^1[34578]\d{9}$/;
        if ((this.newArea == '86' && !reg.test(this.newPhone)) || this.newPhone.length < 7) {
          this.showToast('手机号码格式不正确！', 'warn');
          return;
        }
        let addrReg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
        if (this.newConsignee == '' || !addrReg.test(this.newConsignee)) {
          this.showToast('收货人不能为空，或者输入了特殊符号！', 'warn');
          return;
        }
        if (this.newAddress == '' || !addrReg.test(this.newAddress)) {
          this.showToast('收货地址不能为空，或者输入了特殊符号！', 'warn');
          return;
        }
        /*if (this.newPostalCode == '') {
          return;
        }*/
        if (!this.switchFlag) {/**/
          addUserAddress (this.uid, this.newConsignee, this.newArea, this.newPhone, this.newAddress, '430100').then((data) => {
            // console.log(data);
            if (data.status && data.status == 1) {
              this.showToast('新增地址成功!', 'correct');
              this.clearStorage();
              this.switchFlag = false;
              // console.log(this.gid);
              this.$router.push({path: 'chooseAddress', query: {
                  gid: this.gid,
                  uid: this.uid,
                  cvnt: this.cvnt,
                  name: this.name,
                  num: this.num,
                  unit: '张',
                  area: this.area,
                  phone: this.phone,
                  shopToken: this.shopToken
                }
              });
              /*if (this.gid && this.gid != 0) {
                this.$router.push({path: 'chooseAddress', query: {
                    gid: this.gid,
                    uid: this.uid,
                    cvnt: this.cvnt,
                    name: this.name,
                    num: this.num,
                    unit: '台',
                    area: this.area,
                    phone: this.phone,
                    shopToken: this.shopToken
                  }
                });
              } else {
                this.$router.push({path: 'chooseAddress', query: {
                  uid: this.uid,
                  cvnt: this.cvnt,
                  name: this.name,
                  num: this.num,
                  unit: '台',
                  area: this.area,
                  phone: this.phone,
                  shopToken: this.shopToken
                }});
              }*/
            }
          }).catch((error) => {
              this.showToast(error.info, 'error');
              return;
          })
        } else {
          editUserAddress(this.uid, this.newConsignee, this.newArea, this.newPhone, this.newAddress, '430100', this.addrId).then((data) => {
            // console.log(data);
            if (data.status && data.status == 1) {
              this.showToast('修改收货地址成功!', 'correct');
              this.clearStorage();
              this.switchFlag = false;
              this.$router.push({path: 'chooseAddress', query: {
                gid: this.gid,
                uid: this.uid,
                cvnt: this.cvnt,
                name: this.name,
                num: this.num,
                unit: '张',
                area: this.area,
                phone: this.phone,
                shopToken: this.shopToken
              }});
            }
          }).catch((error) => {
            this.showToast(error.info, 'error');
            return;
          })
        }
      },
      toggleDefaultAddress() {
        this.isDefault = !this.isDefault;
      },
      clearStorage() {
        this.newConsignee = '';
        this.newPhone = '';
        this.newAddress = '';
        this.newPostalCode = '';
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'common/scss/index.scss';
  body,html{
    height:100%;
  }
  .address-container{
    /*height:calc(100% - 88px);*/
    position:relative;
    height:100%;
    background:#F5F5FB;
    overflow-y:auto;
  }
  .input-wrapper{
    padding:30px;
    h2{
      height:34px;
      line-height:34px;
      font-size:34px;
      color:#000;
      font-weight:600;
      span{
        display:inline-block;
        width:6px;
        height:34px;
        margin-right:14px;
        background:#4B74E8;
      }
    }
    .warm-notice{
      margin:15px 0 0;
      font-size:26px;
    }
    .address-input-group{
      margin-top:30px;
      padding:30px 24px;
      border-radius:8px;
      background:#fff;
      h3{
        font-size:32px;
        padding-left:24px;
        color:#333;
      }
      .default-address{
        padding-left:0;
        img{
          width:40px;
          height:40px;
          margin-right:15px;
          vertical-align:sub;
        }
      }
      p{
        input,textarea{
          width:100%;
          border-radius:8px;
          box-shadow:0 0 0 rgba(0,0,0,0);
          -webkit-appearance:none;
          border:1px solid #E3E3E3;
          outline:none;
          margin:24px 0 23px;
          padding:27px 24px;
          font-size: 30px;
          font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
        }
        input{
          height:86px;
        }
        textarea{
          height:172px;
        }
        textarea:focus{
          outline:1px solid #E3E3E3;
        }
      }
    }
  }
  .next-step{
    /*position:fixed;*/
    bottom:0;
    left:0;
    right:0;
    color:#fff;
    height:88px;
    line-height:88px;
    text-align:center;
    background:#173E8F;
    span{
      display:block;
      height:88px;
      line-height:88px;
      font-size:34px;
    }
  }

  .fixed-position{
    position:fixed;
  }
  .static-position{
    position:absolute;
  }

  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
    color: #999;
    font-size: 30px;
  }
  textarea::-webkit-input-placeholder{
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
  }
</style>
<style>
  .cube-toast-tip{
    /*max-width:13em;*/
    font-size:28px;
    max-width:15.5em;
    line-height:40px;
  }
</style>
